<template>
	<div class="hightend">	 
		<TopWidthBack></TopWidthBack>
		<div class="aui-tab" id="tab">
        <div class="aui-tab-item" :class="tabindex==1 && 'aui-active'" @click="Tabclick(1)">奢侈品养护</div>
        <div class="aui-tab-item" :class="tabindex==2 && 'aui-active'" @click="Tabclick(2)">高端成衣家纺</div>
    </div>
    <div class="luxury_box">
      <ul>
        <li v-for="item in imglist" @click="goDetails(item.id,item.title)">
           <!--  <router-link :to="{path:'HightEndDetails/${item.id}'}"> -->
            <img :src='item.picurl'>
         <!--    </router-link> -->
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import TopWidthBack from './../common/TopWithBack.vue'
import { loadHightCare } from '@/api/allapis'
export default{
  name: 'HightEnd',
  data() {
    return {
        tabindex:1,//当前切换按钮的索引
        imglist: [],//文章列表
        param:{
            page:1,
            rows:3,
            cate:''
        }
    }
  },
  methods:{
    Tabclick(index){
        this.tabindex = index
        this.param.cate = index
        this.loadData()
    },
    //拉取信息
    loadData(){
        this.$vux.loading.show({ text: 'Loading' })
        loadHightCare(this.param).then(response=>{
            // console.log(JSON.stringify(response))
            this.imglist = response.data.list
            this.$vux.loading.hide()
        })
    },
    //高端护理详情
    goDetails(id,title){
        this.$router.push({
            path: `HightEndDetails/${id}`,
            query:{
                pagetitle: title
            }
        })
    }
  },
  created(){
    let queryobj = this.$route.query.cate//获取cate
    this.param.cate =  this.$route.query.cate
    this.tabindex = queryobj
    this.loadData()
  },
  components:{
  	TopWidthBack
  }
}
</script>
<style scoped>
    .hightend{padding-top:50px;}
</style>


